<template>
    <div class="layout">
        <el-container class="main-container">
            <el-header class="d-flex align-items-center" style="background-color: #545c64;">
                <a class="h5 mb-0 text-light mr-auto" href="javascript:;">{{ $conf.logo }}</a>
                <el-menu :default-active="navBarList.active" class="el-menu-demo" mode="horizontal"
                    @select="navBarSelect" background-color="#545c64" text-color="#fff" active-text-color="#ffd04b">
                    <el-menu-item v-for="(item, index) in navBarList.list" :key="item.id" :index="index | numToStr">
                        {{ item.name }}
                    </el-menu-item>
                    <el-submenu index="6">
                        <template slot="title">
                            <el-avatar size="medium"
                                src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png">
                            </el-avatar>
                            xiaoyou
                        </template>
                        <el-menu-item index="6-1">修改</el-menu-item>
                        <el-menu-item index="6-2">退出</el-menu-item>
                    </el-submenu>
                </el-menu>
            </el-header>
            <el-container class="core-container" style="height: 0;">
                <el-aside width="200px">
                    <el-menu :default-active="subMenuActive" class="el-menu-vertical-demo" @select="slideSelect"
                        background-color="#dd5567" text-color="#fff" active-text-color="#ffd04b"
                        style="border: 0 none; height: 100%;">
                        <!-- <el-submenu index="1">
                            <template slot="title">
                                <i class="el-icon-menu"></i>
                                <span>导航一</span>
                            </template>
                            <el-menu-item index="1-1">
                                <i class="el-icon-menu"></i>
                                <span slot="title">选项1</span>
                            </el-menu-item>
                        </el-submenu> -->
                        <el-menu-item v-for="(item, index) in subMenuList" :key="item.id" :index="index | numToStr">
                            <i :class="item.icon"></i>
                            <span slot="title">{{ item.name }}</span>
                        </el-menu-item>
                    </el-menu>
                </el-aside>
                <el-main class="bg-light" :class="{ 'elMain': elMainStyles }">
                    <div class="border-bottom bg-white"
                        style="padding: 20px; margin: -20px; position: fixed; top: 80px; z-index: 999; width: 100%;"
                        v-if="breadNavList.length > 0">
                        <el-breadcrumb separator-class="el-icon-arrow-right">
                            <el-breadcrumb-item v-for="(item, index) in breadNavList" :key="index"
                                :to="{ path: item.path }">
                                {{ item.title }}
                            </el-breadcrumb-item>
                        </el-breadcrumb>
                    </div>
                    <!-- 主布局内容 -->
                    <router-view :class="{ 'rv': rvStyles }" />
                    <div style="height: 10000px;"></div>
                    <!-- 回到顶部 -->
                    <el-backtop target=".el-main" :bottom="50">
                        <div :style="styleObject">UP</div>
                    </el-backtop>
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>

<script>
    // 公用的混入方法
    import commonJS from '@/common/mixins/common';

    export default {
        name: 'Layout',
        mixins: [commonJS],
        watch: {
            '$route'(to, from) {
                // 在watch的时候设置本地存储
                this.setActiveLocal();

                // 生成面包屑导航
                this.getRouterBreadNav();

                // 给某些区域加margin-top
                this.setMt();
            }
        },
        created() {
            // 初始化菜单
            this.initMenu();

            // 生成面包屑导航
            this.getRouterBreadNav();

            // 获取localStorage里存储的菜单数据
            this.__initLocalMenuData();

            // 给某些区域加margin-top
            this.setMt();
        },
        mounted() {

        },
        data() {
            return {
                // 我的导航菜单
                navBarList: {},
                // 我的面包屑导航
                breadNavList: [],
                // 控制返回顶部的样式
                styleObject: {
                    height: '100%',
                    width: '100%',
                    backgroundColor: '#f2f5f6',
                    boxShadow: '0 0 6px rgba(0, 0, 0, .12)',
                    textAlign: 'center',
                    lineHeight: '40px',
                    color: '#1989fa'
                },
                // 设置局部样式控制
                elMainStyles: false,
                rvStyles: false
            };
        },
        methods: {
            // 给某些区域加margin-top
            setMt() {
                let tmpArr = this.$route.matched.filter(item => item.name);
                tmpArr.forEach(v => {
                    // 如果是layout和index，那么不设置margin-top
                    if (v.name == 'layout' || v.name == 'index') {
                        this.elMainStyles = false;
                        this.rvStyles = false;
                    } else {
                        this.elMainStyles = true;
                        this.rvStyles = true;
                    }
                });
            },
            // 在watch的时候设置本地存储
            setActiveLocal() {
                let topActive = this.navBarList.active || '0';
                let leftActive = this.subMenuActive || '0';

                window.localStorage.setItem('activeStatus', JSON.stringify({
                    topActive,
                    leftActive
                }));

                this.navBarList.list[topActive].subActive = leftActive;

                window.localStorage.setItem('navBarList', JSON.stringify(this.navBarList.list));
            },
            // 获取localStorage里存储的菜单数据
            __initLocalMenuData() {
                let activeStatus = window.localStorage.getItem('activeStatus');
                let oNavBarList = window.localStorage.getItem('navBarList');

                if (activeStatus) {
                    let obj = JSON.parse(activeStatus);
                    this.navBarList.active = obj.topActive;
                    this.subMenuActive = obj.leftActive;
                }

                if (oNavBarList) {
                    let listObj = JSON.parse(oNavBarList);
                    this.navBarList.list = listObj;
                }
            },
            // 生成面包屑导航
            getRouterBreadNav() {
                let arr = [];
                let tmpArr = this.$route.matched.filter(item => item.name);
                tmpArr.forEach(v => {
                    // 排除layout和index -> 这两个不用添加面包屑
                    if (v.name == 'layout' || v.name == 'index') return;
                    arr.push({
                        name: v.name,
                        path: v.path,
                        title: v.meta.title
                    });
                });

                // 如果arr.length > 0，那么在arr前面将index -> 后台首页拼接在前面
                if (arr.length > 0) {
                    arr.unshift({
                        name: 'index',
                        path: '/index',
                        title: '后台首页'
                    });
                }

                // 将arr赋值给我当前data里定义的面包屑数组对象
                this.breadNavList = arr;
            },
            // 初始化菜单
            initMenu() {
                this.navBarList = this.$conf.navBarList;
            },
            // 头部上方导航
            navBarSelect(key, keyPath) {
                // 赋予当前索引值
                this.navBarList.active = key;

                if (this.subMenuList.length > 0) {
                    // 默认选中跳转当前激活的路由页面
                    this.$router.push({
                        name: this.subMenuList[this.subMenuActive].pathname
                    });
                }
            },
            // 左侧导航菜单
            slideSelect(key, keyPath) {
                // 赋予当前索引值
                this.subMenuActive = key;

                // 点击左侧的导航可以跳转对应的路由页面了
                this.$router.push({
                    name: this.subMenuList[key].pathname
                });
            }
        },
        computed: {
            // 左侧子菜单active
            subMenuActive: {
                get() {
                    return this.navBarList.list[this.navBarList.active].subActive || '0';
                },
                set(val) {
                    this.navBarList.list[this.navBarList.active].subActive = val;
                }
            },
            // 头部子菜单列表
            subMenuList() {
                return this.navBarList.list[this.navBarList.active].subMenu || [];
            }
        }
    };
</script>

<style scoped>
    .main-container {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 1;
        overflow: hidden;
    }

    .core-container {
        height: 100%;
    }

    /** el-main -> margin-top: 55px; */
    .elMain {
        margin-top: 55px;
    }

    /** router-view -> margin-top: -8px; */
    .rv {
        margin-top: -8px;
    }
</style>